<template>
	<view v-if="is_init">
		<uni-popup-input name="添加关键词回复" @close="on_close">

			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>触发类型
				</view>
				<view class="banmi_input_val">
					<uni-data-checkbox :localdata="localdata_triggerType_list" @change="change_mode" :value="mode"
						mode="default"></uni-data-checkbox>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>多个回复
				</view>
				<view class="banmi_input_val">
					<uni-data-checkbox :localdata="localdata_multipleReplies_list" @change="change_post_method"
						:value="post_method" mode="default"></uni-data-checkbox>
				</view>
			</view>

			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>触发关键字
				</view>
				<view class="banmi_input_val">
					<uni-easyinput v-model="key" placeholder="请输入触发关键字">
					</uni-easyinput>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>回复内容
				</view>
				<view class="banmi_input_val">
					<view class="" style="width: 800rpx;">
						<view class="banmi_flex a-c  bb  " style="margin-left: 30px;" v-for="(vo,index) in reply_list"
							:key="index">
							<view class=" p-b-10" v-if="vo.type=='text'">
								<text class="f-14  ">{{vo.content}}</text>
								<view class="cred c-7 f-14">---【文字】</view>
							</view>
							<view class=" p-b-10" v-if="vo.type=='music'">
								<view class="f-14 c-7">
									【音频音乐】
								</view>
							</view>
							<view class="p-b-10" v-if="vo.type=='image'">
								<image class="b-y" style="width: 80px;height: 80px;" :src="vo.attachment" mode="">
								</image>
								<view class="cred c-7 f-14">---【图片】
								</view>
							</view>
							<view class="p-b-10" v-if="vo.type=='video'">
								<video :controls="false" :show-fullscreen-btn="false" style="width: 80px;height: 80px;"
									v-if="vo.type=='video'" :show-center-play-btn="false" :show-play-btn="false"
									:id="'videoId'+index" :src="vo.attachment">
								</video>
								<view class="cred c-7 f-14">---【视频】
								</view>
							</view>
							<view class="p-b-10" v-if="vo.type=='applets'">
								<view class="banmi_flex ">
									<view class="f-14 c-7" style="width: 50px;">标题 : </view>
									<text class="f-14 m-l-10">{{vo.title}}</text>
								</view>
								<view class="banmi_flex pt1">
									<view class="f-14 c-7" style="width: 50px;">跳转页 : </view>
									<text class="f-14 m-l-10">{{vo.miniprogram}}</text>
								</view>
								<view class="banmi_flex pt1">
									<view class="f-14 c-7" style="width: 50px;">appid : </view>
									<text class="f-14 m-l-10">{{vo.appid}}</text>
								</view>
								<view class="pt1">
									<image v-if="vo.img_url" style="width: 80px;height: 80px;" :src="vo.img_url">
									</image>
								</view>
								<view class="cred c-7 f-14">---【小程序】
								</view>
							</view>
							<view class="p-b-10" v-if="vo.type=='news'">
								<view class="banmi_flex ">
									<view class="f-14 c-7" style="width: 55px;">标题 : </view>
									<text class="f-14 m-l-10">{{vo.title}}</text>
								</view>
								<view class="banmi_flex pt1">
									<view class="f-14 c-7" style="width: 55px;">描述 : </view>
									<text class="f-14 m-l-10">{{vo.description}}</text>
								</view>
								<view class="banmi_flex pt1">
									<view class="f-14 c-7" style="width: 55px;">跳转url : </view>
									<text class="f-14 m-l-10">{{vo.url}}</text>
								</view>
								<view class="pt1">
									<image v-if="vo.picurl" style="width: 80px;height: 80px;" :src="vo.picurl">
									</image>
								</view>
								<view class="cred c-7 f-14">---【图文】
								</view>
							</view>


							<view @click="on_reply_list_del(vo.id)" class="f-14 del_but">
								删除
							</view>
						</view>


					</view>
				</view>
			</view>
			<view class="banmi_input_edit a-c">
				<view class="banmi_input_edit_name">
					<text class="cred">*</text>回复类型
				</view>
				<view class="banmi_input_val">
					<uni-data-checkbox :localdata="localdata_replyType_list" @change="change_t_type" :value="t_type"
						mode="default"></uni-data-checkbox>
				</view>
			</view>

			<view class="banmi_input_edit banmi_flex a-c">
				<view class="banmi_input_edit_name">
					是否启用
				</view>
				<view @click="confirm_isstate(isstate)">
					<banmi-switch :is_state="isstate" is_type='0'></banmi-switch>
				</view>
			</view>


			<view class="a-c  p-b-20 banmi_input_edit">
				<view class="banmi_input_edit_name">
				</view>
				<view class="">
					<button @click="on_sava()" type="primary" style="width: 80px;" size="mini">保存</button>
				</view>
			</view>

		</uni-popup-input>
		<uni-popup ref="WxText" type="dialog">
			<uni-popup-wx-text @on_confirm="on_text_confirm">
			</uni-popup-wx-text>
		</uni-popup>
		<uni-popup ref="WxImage" type="dialog">
			<uni-popup-wx-image :t_type="t_type" :t_name="t_name" @on_add_img="on_add_img">
			</uni-popup-wx-image>
		</uni-popup>

		<uni-popup ref="WxApplets" type="dialog">
			<uni-popup-wx-applets :t_type="t_type" :t_name="t_name" @on_add_img="on_add_applets">
			</uni-popup-wx-applets>
		</uni-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				localdata_triggerType_list: [{
						text: '完全匹配',
						value: 0
					},
					{
						text: '模糊匹配',
						value: 1
					}
				],
				localdata_multipleReplies_list: [{
						text: '随机回复1条',
						value: 0
					},
					{
						text: '多个批量回复',
						value: 1
					}
				],
				localdata_replyType_list: [{
						text: '文字',
						value: 'text'
					},
					{
						text: '图片',
						value: 'image'
					},
					{
						text: '视频',
						value: 'video'
					},
					{
						text: '语音',
						value: 'voice'
					},
					{
						text: '音乐',
						value: 'music'
					},
					{
						text: '小程序',
						value: 'applets'
					},
					{
						text: '图文连接',
						value: 'news'
					}
				],
				mode: 0,
				post_method: 0,
				key: '',
				t_type: '',
				t_name: '',
				is_init: false,
				reply_list: [],
				isstate: 1,


			}
		},

		methods: {
			confirm_isstate(val) {
				if (val == 1) {
					this.isstate = 0
				} else {
					this.isstate = 1
				}
			},

			on_reply_list_del(id) {
				this.reply_list = this.reply_list.filter(t => t.id != id);
			},
			on_add_img(list) {
				var reply_list = this.reply_list;
				var news_list = reply_list.concat(list)
				this.reply_list = news_list;

			},
			on_add_applets(find) {
				this.reply_list.push(find);
			},
			on_text_confirm(val) {
				var reply_list = this.reply_list;
				reply_list.push({
					id: 'name@' + Date.now(),
					type: this.t_type,
					content: val,
					media_id: val,
				})

			},
			change_mode(e) {
				this.mode = e.detail.value
			},
			change_post_method(e) {
				this.post_method = e.detail.value
			},
			change_t_type(e) {
				this.t_type = e.detail.value
				this.t_name = e.detail.text
				if (this.t_type == 'text') {
					this.$refs.WxText.open()
				} else if (this.t_type == 'image' || this.t_type == 'voice') {
					this.$refs.WxImage.open()
				} else {
					this.$refs.WxApplets.open()
				}

			},
			on_sava() {
				if (this.t_type == 'text') {
					if (!this.key) {
						uni.showToast({
							title: '请输入关键词',
							icon: "none"
						})
						return
					}
				}

				if (this.reply_list.length == 0) {
					uni.showToast({
						title: '请选择回复的内容',
						icon: "none"
					})
					return
				}
				this.ok_ajax();

			},
			async ok_ajax() {


				let requestParams = {
					key: this.key,
					reply_list: JSON.stringify(this.reply_list),
					mode: this.mode,
					state: this.isstate,
					event: this.tabindex
				};
				const ret = await this.Banmikeji.Wechatsreply_reply_add(requestParams);

				if (ret.status == 200) {
					this.$emit('confirm');
					this.on_close();

				}



			},


			init(tabindex) {
				var that = this;
				if (tabindex == 1) {
					this.key = '被关注了';
				} else if (tabindex == 2) {
					this.key = '默认回复';
				}
				this.tabindex = tabindex

				this.is_init = true;
			},

			on_close() {
				this.mode = 0;
				this.post_method = 0;
				this.key = '';
				this.t_type = '';
				this.t_name = '';
				this.reply_list = [];
				this.isstate = 1;
				this.is_init = false;
			},
			//js分类方法

		}
	}
</script>

<style>
	/* 	button::after {
		border: none;
	} */

	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.but {
		width: 120rpx;
		height: 100rpx;
		padding: 0;
		border: 0;
		background-color: transparent;
		outline: none;
	}

	button {
		padding: 0;

		/* 	background: transparent; */
	}

	.del_but {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #C0C0C0;
		width: 50px;
		height: 20px;
		border-radius: 5px;
		margin-left: 20px;
		flex-shrink: 0;
		color: #fff;
	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}
</style>